<template>
	<v-content ref="content" padding-bottom="180">
		<swiper class="swiper" circular @change="onSwiperChange">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image class="image" :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<div class="title padding">{{ message.courseName }}</div>
		<div class="time padding">
			<u-icon
				name="clock"
				size="27rpx"
				:label="totalMinutes"
				color="#999999"
				label-color="#999999"
				label-size="24rpx"
			></u-icon>
		</div>
		<div class="handle padding">
			<div class="user-list" v-if="studyTotal > 0">
				<div
					class="item"
					:class="{ active: studyTotal > 1 }"
					v-for="(item, index) in studyUserList"
					:key="index"
				>
					<image class="image" :src="item.avatar" mode="aspectFill"></image>
				</div>
			</div>
			<div class="tip">已学习: {{ studyTotal || 0 }}人</div>
			<div class="button radius" @click="collectFn">
				<image
					class="image"
					src="/static/image/icon-star-active.png"
					:class="{ fill: isJump }"
					v-if="message.isCollect"
				></image>
				<image class="image" src="/static/image/icon-star.png" v-else></image>
				{{ message.isCollect ? "已收藏" : "收藏" }}
			</div>
			<div class="button radius primary bg" @click="onStartStudy">开始学习</div>
		</div>
		<div class="list-detail padding">
			<image class="icon" src="/static/image/icon-menu.png"></image>
			共{{ message.chapterList.length }}个章节{{ coursewareLength }}个课件
		</div>

		<div class="tab padding">
			<div class="item" :class="[{ active: current == 0 }]" @click="onTabChange(0)">课程简介</div>
			<div class="item" :class="[{ active: current == 1 }]" @click="onTabChange(1)">目录</div>
			<div class="item" :class="[{ active: current == 2 }]" @click="onTabChange(2)">评论</div>
		</div>

		<d-details ref="dDetailsRef" :current="current" :message="message"></d-details>

		<div class="footer" v-if="current != 2">
			<div class="button radius" @click="onStartStudy">开始学习</div>
		</div>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
import DDetails from "./details-components/index.vue"

export default {
	name: "learn-details",
	mixins: [mixins],
	data() {
		return {
			bannerList: [],
			current: 0,
			message: {
				chapterList: [],
				totalMinutes: 0,
			},
			studyUserList: [],
			studyTotal: 0,
			chapterId: "",
			coursewareId: "",
			total: 0,
			isJump: false,
		}
	},
	computed: {
		coursewareLength() {
			return this.$store.getters.coursewareLength
		},
		totalMinutes() {
			return "课程时长: " + (this.message.totalMinutes | 0) + "分钟"
		},
	},
	methods: {
		onshow() {
			this.getDetails()
			this.getStudyUserList()
		},
		async getDetails() {
			const data = await this.$store.dispatch("getCourseInfo", this.query.id)

			this.bannerList = [data.coverImg]
			data.chapterList.some(item => {
				if (item.coursewares) {
					return item.coursewares.some(item => {
						if (item.status == 1 || item.status == 2 || item.status == null) {
							this.chapterId = item.chapterId
							this.coursewareId = item.id
							return true
						}
					})
				}
				return false
			})

			this.message = data
			this.total = this.$refs.dDetailsRef.total
		},
		async getStudyUserList() {
			const data = await this.$axios.get("/api/study/course/studyCourse/userList", {
				id: this.query.id,
			})

			this.studyUserList = data.members.slice(0, 5)
			this.studyTotal = data.total
		},

		onSwiperChange({ detail: { current } }) {},
		onTabChange(index) {
			this.current = index
		},

		onStartStudy() {
			if (!this.isLogin) {
				this.showMessage.modal({
					title: "提示",
					content: "请先登录",
					confirm: next => {
						this.toPage("/pages/login/index")
						next()
					},
				})
				return
			}
			if (this.message.isBind) {
				this.toLearn()
				return
			}
			this.showMessage.modal({
				title: "提示",
				content: "是否开始学习?",
				confirm: async (next, cancel) => {
					try {
						await this.$axios.post("/api/study/course/studyCourseLog/save", {
							courseId: this.message.id,
						})
						next()
						this.toLearn()
					} catch (error) {
						cancel()
						this.showMessage.error(error)
					}
				},
			})
		},
		toLearn() {
			this.toPage("/pages/learn/content", {
				courseId: this.message.id,
				chapterId: this.chapterId,
				coursewareId: this.coursewareId,
			})
		},

		onScrollBottom() {
			this.$refs.dDetailsRef.onScrollBottom()
		},
		async collectFn() {
			if (this.message.isCollect) {
				this.isJump = false
			} else {
				this.isJump = true
			}
			await this.$axios.get("/api/member/studyCollect/change", {
				targetId: this.query.id,
				collectType: "00",
			})
			this.message.isCollect = !this.message.isCollect
		},
	},
	components: {
		DDetails,
	},
}
</script>

<style lang="scss" scoped>
.swiper {
	height: 540rpx;
	.image {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.title {
	font-size: 38rpx;
	padding-top: 20rpx;
	padding-bottom: 10rpx;
}
.time {
	padding-bottom: 30rpx;
	padding-top: 10rpx;
}
.handle {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.user-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 30rpx;
		.item {
			width: 45rpx;
			height: 45rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: -15rpx;
			position: relative;
			z-index: 1;
			.image {
				width: 100%;
				height: 100%;
				display: block;
			}

			&.active {
				&:last-child {
					&::before {
						content: "";
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						margin: auto;
						z-index: 3;
						background: #fff;
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						box-shadow: -12rpx 0 0 0 #fff, 12rpx 0 0 0 #fff;
					}
					&::after {
						content: "";
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						z-index: 2;
						background: rgba(#000, 0.55);
					}
				}
			}
		}
	}
	.tip {
		font-size: 24rpx;
		color: #999999;
	}
	.button {
		padding: 8rpx 14rpx;
		font-size: 24rpx;
		margin-left: auto;
		.image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
			// animation: banuce 0.2s ease 0s 2 alternate;
		}
		.fill {
			position: relative;
			animation: banuce 0.2s ease 0s 2 alternate;
		}
		.fill::before {
			opacity: 0;
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			width: 10%;
			height: 10%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background: transparent;
			box-shadow: 15px -15px 0 #fed001, 15px 15px 0 #fed001, -15px -15px 0 #fed001, -15px 15px 0 #fed001;
			animation: show 0.2s steps(1, end) 0s 1;
		}
		.fill::after {
			opacity: 0;
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			animation: circle 0.3s ease 0.02s 1 alternate;
			border-radius: 50%;
			background: rgba(254, 208, 1, 0.1);
		}

		/* 放大 */
		@keyframes banuce {
			0% {
				transform: scale(0.8);
			}
			100% {
				transform: scale(1.35);
			}
		}
		/* 缩放加透明度变化 */
		@keyframes circle {
			0% {
				transform: scale(0.2);
				opacity: 0.8;
			}
			100% {
				transform: scale(1.5);
				opacity: 1;
			}
		}
		/* 出现。用opacity来控制元素隐藏显示 */
		@keyframes show {
			0% {
				opacity: 1;
			}
		}

		&.primary {
			margin-left: 15rpx;
			background: $primary;
			padding-inline: 30rpx;
		}
	}
}
.list-detail {
	line-height: 90rpx;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #85868b;
	font-size: 24rpx;
	.icon {
		width: 30rpx;
		height: 24rpx;
		margin-right: 15rpx;
	}
}

.tab {
	border-top: 20rpx solid #fafafa;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 5rpx 15rpx 0 rgba(#000, 0.05);
	line-height: 95rpx;
	color: #333;
	font-size: 30rpx;
	text-align: center;
	.item {
		width: 190rpx;
		border-bottom: 4rpx solid #fff;
		&.active {
			color: $primary;
			border-bottom: 4rpx solid $primary;
		}
	}
}

.footer {
	position: fixed;
	z-index: 9;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.button {
		height: 90rpx;
		font-size: 30rpx;
		background: $primary;
		width: 660rpx;
		&.disabled {
			background: #bec5cd;
		}
	}
}
</style>
